<script setup lang="ts">
import { onMounted, ref, onUnmounted, computed } from 'vue';
import { statistics } from '@/api/index';
import { post } from '@/utils/request';
// 模拟数据，对应图片中的10个类别和百分比
const progressData = ref([
  { category: '汽配', percentage: 100 },
  { category: '五金建材', percentage: 18 },
  { category: '百货', percentage: 14 },
  { category: '鞋服', percentage: 12 },
  { category: '家电电子', percentage: 11 },
  { category: '花卉植物', percentage: 10 },
  { category: '药品', percentage: 9 },
  { category: '医疗用品', percentage: 8.5 },
  { category: '化工制品', percentage: 8.2 },
  { category: '文体广告', percentage: 8 },
]);
const duplicatedData: any = ref([])
const getList = async () => {
  try {
    const res: any = await post(statistics.goodsCategory)
    if (res.code === '0000') {
      progressData.value = res.data
      duplicatedData.value = [...progressData.value, ...progressData.value]

    }
  } catch (error) {

  }
}

const scrollContainer: any = ref(null)
const scrollContent: any = ref(null)
const scrollPosition: any = ref(0)
const scrollSpeed: any = 0.3 // 调整这个值可以改变滚动速度
let animationFrameId: any = null
const startScrolling = () => {
  const scroll = () => {
    scrollPosition.value += scrollSpeed

    // 当滚动到一半内容时重置位置
    if (scrollPosition.value >= scrollContent.value.scrollHeight / 2) {
      scrollPosition.value = 0
    }

    animationFrameId = requestAnimationFrame(scroll)
  }

  animationFrameId = requestAnimationFrame(scroll)
}

const stopScrolling = () => {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
  }
}

onMounted(() => {
  getList()
  startScrolling()
})
onUnmounted(() => {
  stopScrolling()
})  
</script>

<template>
  <div class="content h-[457px] overflow-hidden rounded-lg relative" ref="scrollContainer">
    <div class="scrolling-content" ref="scrollContent" :style="{ transform: `translateY(-${scrollPosition}px)` }">
      <template v-for="(item, index) in duplicatedData" :key="`${index}-${item.category}`">
        <div class="flex flex-col mb-[13px] last:mb-0">
          <div class="h-[30px] flex items-center pl-[11px] justify-between">
            <span class="index text-white font-medium flex items-center">
              <span class="text1" :style="{ color: index % progressData.length < 3 ? '#6191EC' : '#D9E7FF' }">
                {{ (index % progressData.length) + 1 }}
              </span>
              <span class="pl-[22px]">{{ item.category }}</span>
            </span>
            <span class="font-medium" :style="{ color: index % progressData.length < 3 ? '#6191EC' : '#D9E7FF' }">
              {{ item.percentage }}
            </span>
          </div>
          <el-progress :percentage="item.percentage" :stroke-width="3" :format="() => ''"
            :color="index % progressData.length < 3 ? '#6191EC' : '#D9E7FF'" class="progress-bar" />
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  border-radius: 8px;
}

.progress-bar {
  width: 100%;

  .el-progress-bar__outer {
    border-radius: 5px;
    height: 3px;
    width: 100%;
  }

  .el-progress-bar__inner {
    border-radius: 5px;
    height: 3px;
    transition: width 1s ease-in-out;
  }
}

.index {
  font-size: 14px;
}

.title {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 700;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 20px;
  text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
  text-align: left;
  font-style: normal;
  text-transform: none;
  border-left: 7px solid #6191EC;
  background-image: url('@/assets/img/content-img/title-background-left-top.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.text1 {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 16px;
  color: #6191EC;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.text2 {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 21px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.el-progress {
  display: block !important;
}
</style>
